<script lang="ts" setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { ElMessageBox } from 'element-plus'
import { db } from '../api/db/dbApi.js'
//数据库类型
const options = [
  {
    value: 'MySql',
    label: 'MySql'
  },
  {
    value: 'SqlServer',
    label: 'SqlServer'
  }
]
//Props 支柱  [从父类接受的参数]
const props = defineProps(['dialogFormVisible', 'id'])
//自定义事件
const emit = defineEmits(['close'])
//配置对象
const dbEntity = ref({})
//表单输入对象
const formRef = ref()
//表单验证对象  reactive == ref [不同: ref 包裹  reactive 替换]
const rules = reactive({
  confname: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  datatype: [{ required: true, message: '请选择数据库类型', trigger: 'blur' }],
  host: [{ required: true, message: '请输入主机名或IP地址', trigger: 'blur' }],
  port: [{ type: 'number', required: true, message: '端口号输入有误', trigger: 'blur' }],
  user: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  database: [{ required: true, message: '请输入数据库', trigger: 'blur' }],
})

/**
 * 检验
 */
async function dbEntityValidate(operate) {
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      operate()
    } else {
      console.log('error submit!', fields)
    }
  })
}

/**
 * 测试连接
 */
async function testConnect() {
  await dbEntityValidate(async () => {
    const response = await db.testConnect(dbEntity.value)
    ElMessageBox.alert(response.data.data ? '成功' : '失败', '消息')
  })
}

/**
 * 保存连接配置
 */
async function dbEntitySave() {
  // await dbEntityValidate(() => {
  //   db.save(dbEntity.value).then((res) => {
  //     console.log(res.data)
  //     closeFun()
  //   })
  // })
}
/**
 * 关闭对话框事件
 */
function closeFun() {
  //重置该表单项，将其值重置为初始值，并移除校验结果
  formRef.value.resetFields()
  emit('close')
}

/**初始化 */
onBeforeMount(async () => {
})
</script>

<template>
  <el-dialog v-model="props.dialogFormVisible" @close="closeFun">
    <el-form ref="formRef" :model="dbEntity" :rules="rules" label-width="120px">
      <el-form-item label="保存名称" prop="confname">
        <el-input v-model="dbEntity.confname" />
      </el-form-item>
      <el-form-item label="数据库类型" prop="datatype">
        <el-select v-model="dbEntity.datatype" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="主机名或IP地址" prop="host">
        <el-input v-model="dbEntity.host" />
      </el-form-item>
      <el-form-item label="端口号" prop="port">
        <el-input v-model.number="dbEntity.port" />
      </el-form-item>
      <el-form-item label="用户名" prop="user">
        <el-input v-model="dbEntity.user" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="dbEntity.password" />
      </el-form-item>
      <el-form-item label="数据库" prop="database">
        <el-input v-model="dbEntity.database" />
      </el-form-item>
      <el-form-item>
        <el-button @click="testConnect">测试连接</el-button>
        <el-button @click="closeFun">取消</el-button>
        <el-button type="success" @click="dbEntitySave">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
